<template>
	<div class="app-container" >
		<div>
			<el-button type="primary" @click="handleadd">新增地区</el-button>
		</div>
		<el-row>
			<el-col :span="3" v-for="item in areaTreeAll">
				<router-link :to="'/system/area-third/index/' + item.areaId" class="link-type">
					<a class="areaTree" :title="item.areaName">{{item.areaName}}</a>
				</router-link>
					<el-button type="text" @click="handleedit(item.areaId,item.areaName)">编辑</el-button>	
				
			</el-col>
		</el-row>
		<!-- 对话框 -->
		<el-dialog :title="title" :visible.sync="dialogFormVisible">
		  <el-form ref="form" :model="form" >
		    <el-form-item label="地区名称" :label-width="formLabelWidth" prop="areaName">
		      <el-input v-model="form.areaName" placeholder="请输入省或直辖市名称"></el-input>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="cancel">取 消</el-button>
		    <el-button type="primary" @click="submitForm">确 定</el-button>
		  </div>
		</el-dialog>
	</div>
</template>

<script>
	import {AreaTree,insertArea,updateArea} from "../../../api/area.js"
	export default {
		name: 'AreaSecond',
		data(){
			return{
				areaQuery:{
					parentId: 0
				},
				areaTreeAll:[],
				dialogFormVisible:false,
				form: {
					areaId: '',
				    areaName: '',
				    parentId: '',
				    level: 2
				    },
			    formLabelWidth: '120px',
				title: undefined,
				level: undefined
			}
		},
		created() {
			this.areaQuery['parentId'] = this.$router.currentRoute.params.areaId;
			this.form['parentId'] = this.$router.currentRoute.params.areaId;
			this.getArea()
		},
		methods:{
			getArea(){
				AreaTree(this.areaQuery).then(resp =>{
					this.areaTreeAll = resp.data;
				})
			},
			handleadd(){
				this.dialogFormVisible = true;
			},
			handleedit(areaId,areaName){
				this.dialogFormVisible = true;
				this.form['areaId'] = areaId;
				this.form['areaName'] = areaName
			},
			reset(){
				this.form = {
					areaId: '',
					areaName: '',
					parentId: this.areaQuery['parentId'],
					level: 1
				}
				if(this.$refs['form']){
					this.$refs['form'].resetFields();
				}
			},
			cancel(){
				this.reset()
				this.dialogFormVisible = false;
				
			},
			submitForm(){
				if(this.form['areaId']){
					this.title = "修改二级地区";
					updateArea(this.form).then(resp => {
						this.$message({
							type: 'success',
							message: '修改成功'
						})
						this.getArea();
						this.reset();
					})
				}else{
					this.title = "新增二级地区";
					insertArea(this.form).then(resp =>{
						this.$message({
							type: 'access',
							message: '新增成功'
						});
						this.getArea();
						this.reset();
					})
				}
				this.dialogFormVisible = false;
			}
		}
	}
</script>

<style>
	  .el-row {
		margin-top:20px;
	    margin-bottom: 40px;
	    &:last-child {
	      margin-bottom: 0;
	    }
	  }
	  .el-col{
		  margin-bottom:1rem;
	  }
	  .areaTree{
		  display: block;
		  white-space:nowrap;
		  max-width: 80px;
		  overflow: hidden;
		  text-overflow: ellipsis;
	  }
	  .el-input__inner{
		  width: 200px;
	  }
	  .el-dialog{
		  width: 400px;
	  }
</style>
